<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/layui/layui.js"></script>
		<script src="../js/common.js"></script>
	</head>

	<body>
		静态模板-动态数据(ajax)-渲染:
		<div id="tpl-1" data-tpl>
			<input type="checkbox" name="y" checked/>
			<div v-if="d.x">{{d.x_t}}</div>
			<div v-for="t in d.y">{{d.y}}</div>
			<div v-html="d.z">html</div>
			<div v-text="d.w">text</div>
			<div>d_w:{{d.v}}</div>
		</div>
		<br /><br />
		<div>
			<button id="btn61" onclick="ajaxLaytpl()">动态添加模板渲染</button><br />
		</div>
		<br /> 动态模板(ajax)-动态数据(ajax)-渲染:
		<div id="tpl-2"></div>
		<script type="text/javascript">
			var ajaxLaytpl;
			/*$.get('url', function(data) {*/
			var data = {
				x: true,
				x_t: 'if显示的内容',
				y: ['循环1', '循环3', '循环3'],
				z: '<span style="color: #f00;">标签不转义</span>',
				w: '<span style="color: #f00;">标签转义</span>',
				v: '文本文本'
			};
			laytpl('#tpl-1', data, function(v) {
				//console.log(v);
				$('#tpl-1').html(v);
			})
			/*});*/

			ajaxLaytpl = function ajaxLaytpl() {
				/*$.post('url', function(data) {*/

				var tplText = '<div><div v-if="d.x">{{d.x_t}}</div> <div v-for="t in d.y">{{d.y}}</div><input type="checkbox" name="y" checked/><div v-html="d.z">html</div> <div v-text="d.w">text</div> <div>d_w:{{d.v}}</div></div></div>';
				var tpl2 = $(tplText)[0];
				var data = {
					x: true,
					x_t: 'if显示的内容',
					y: ['循环1', '循环3', '循环3'],
					z: '<span style="color: #f00;">标签不转义</span>',
					w: '<span style="color: #f00;">标签转义</span>',
					v: '文本文本'
				};

				laytpl(tpl2, data, function(v) {
					//console.log(v);
					$('#tpl-2').append(v);
				})
				/*});*/
			};
		</script>
	</body>

</html>